import React, { memo } from "react"
import type { FC, ReactNode } from 'react'

import { useAppDiapatch, useAppSelector } from "../../../store"
import { shallowEqual } from "react-redux"
import { changeName } from "../../../store/modules/user"
import { ChildOneWrapper } from './style'

interface IProps {
  children?: ReactNode
}

const ChildOne: FC<IProps> = () =>{
const { username,direction } = useAppSelector(state =>{
  return {
    username:state.user.username,
    direction:state.user.direction
  }
},shallowEqual)

const dispatch = useAppDiapatch()
function nameClick(val:string){
  dispatch(changeName(val))
}

  return (
    <ChildOneWrapper color="blue" size={14} fontWeight={600}>
      <h1 className="h1">ChildOne page</h1>
      <h5>username:{username}</h5>
      <div>
        <button onClick={() =>{nameClick('tom')}}>change name</button>
      </div>
      <div>direction:{direction}</div>
    </ChildOneWrapper>
  )
}

export default memo(ChildOne)